<template>
  <div>
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1>{{isEditReport ? 'Edit' : 'Add'}} Daily Report</h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="breadcrumb">
        <a-breadcrumb :routes="routes">
          <template slot="itemRender" slot-scope="{route, params, routes}">
            <span v-if="routes.indexOf(route) === routes.length - 1">
              {{isEditReport ? 'Edit' : 'Add'}}&nbsp;{{route.breadcrumbName}}
            </span>
            <router-link v-else :to="route.path">
              {{route.breadcrumbName}}
            </router-link>
          </template>
        </a-breadcrumb>
      </div>
      <div class="portlet">
        <div class="grid grid-col-3">
          <div>
            <div class="addtransaction-form">
              <a-form
                :form="form"
                layout="vertical"
                @submit="handleSubmit"
              >
                <a-form-item label="Email(s) (separated by comma without spaces)">
                  <a-input
                    v-decorator="[
                    'email',
                    {
                      rules: [
                        { validator: checkEmail }
                      ],
                    }
                    ]"
                  />
                </a-form-item>

                <a-form-item label="SSP company">
                  <a-select
                    style="width: 100%;"
                    showSearch
                    v-decorator="['SSPcompany']"
                  >
                    <a-select-option
                      :key="1"
                      value="SSP company"
                    >SSP company</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item>
                  <a-checkbox
                    @change="onChange"
                    :checked="true"
                    v-decorator="['active']"
                  >Active</a-checkbox>
                </a-form-item>

                <a-form-item>
                  <a-button type="primary" html-type="submit">Save</a-button>
                </a-form-item>
              </a-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routes: [
        {
          path: "/admin/dailyreportmanager",
          breadcrumbName: "Daily Report Manager"
        },
        {
          path: "second",
          breadcrumbName: `Daily Report`
        }
      ],
      form: this.$form.createForm(this),
    }
  },
  methods: {
    onChange(e) {
      console.log(`${e.target.checked}`)
    },
    checkEmail(rule, value, callback) {
      if (value) {
        const pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        const emails = value.split(',')
        const pass = emails.every(email => pattern.test(email))
        if (pass) {
          callback()
        } else {
          callback('邮箱格式不正确！多个邮箱请用英文逗号隔开，没有空格。')
        }
      } else {
        callback('Email is required!')
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        // console.log(err)
        console.log(values)
        if (!err) {}
      })
    }
  },
  computed: {
    isEditReport() {
      return Object.keys(this.$route.query).length > 0
    }
  },
  mounted() {
    this.form.setFieldsValue({
      active: this.isEditReport ? this.$route.query.active : true,
      email: this.isEditReport ? this.$route.query.email : undefined
    });
  }
}
</script>
